<template>
  <div class="login">
    <el-card class="box-card">
      <el-image :src="imgsrc" class="logo"></el-image>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { login } from "@/ulits/api/login/login";
export default {
  name: "login",
  data() {
    return {
      imgsrc: require("@/assets/logo.png"),

      ruleForm: { username: "admin", password: "123456" },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // 判断验证是否完成
        if (valid) {
          login(this.ruleForm)
            .then((res) => {
              if (res.meta.status == 200) {
                // 保存token
                this.$store.commit("inittoken", res.data.token);
                // 成功提示
                this.$message({
                  message: res.meta.msg,
                  type: "success",
                });
                this.$router.push("/Welcome");
              } else {
                // 失败提示
                this.$message({
                  message: res.meta.msg,
                  type: "error",
                });
              }
            })
            .catch((err) => console.log(err));
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {
    this.$store.commit("inittoken", null);
    this.$store.commit("initactivecai", null);
  },
};
</script>
<style lang="scss" scpoed>
.login {
  background: #2b4b6b;
  width: 100%;
  height: 100vh;

  .el-card,
  .el-message {
    overflow: initial;
  }
  /deep/ {
    .el-form-item__content {
      margin: 0;
    }
  }
  .box-card {
    width: 480px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .el-form {
      margin-top: 90px;
      .el-input:first-child {
        margin: 0;
      }
      .el-input {
        margin-top: 30px;
      }
    }
    .el-form-item {
      margin-top: 30px;
    }
    text {
      font-size: 14px;
    }

    .item {
      padding: 18px 0;
    }
    .logo {
      position: absolute;
      top: -50%;
      left: 50%;
      width: 30%;
      transform: translate(-50%, 50%);
      z-index: 2;
      border-radius: 50%;
      background: #eee;
      border: 10px solid #fff;
      box-shadow: 0px 1px 6px 1px #eee;
    }
  }
}
</style>
